<template>
  <div class="flex flex-row w-full justify-between">
    <div class="px-[10px] userInfo-container">
      <el-divider />
      <div>
        <el-link
          :underline="false"
          @click="pageStore.goToUserFav"
        >我的喜欢</el-link>
      </div>
      <el-divider />
      <div>
        <el-link
          :underline="false"
          @click="pageStore.goToUserPublish"
        >我的发布</el-link>
      </div>
      <el-divider />
    </div>
    <div style="width: 30%;">
      <div class="hello-box flex flex-row items-center justify-between">
        <div class="ml-[20px] text-xl text-center">
          欢迎使用<br><b class="text-3xl">wuliwuli</b>
        </div>
        <img
          src="../../assets/hello.svg"
          style="height: auto; width: 60%"
        />
      </div>
      <div class="hello-box">
        <div class="flex flex-row justify-between">
          <div>个人资料</div>
          <el-button
            plain
            @click="pageStore.gotoModifyInfo"
          >修改资料</el-button>
        </div>
        <el-divider style="margin: 5px;" />
        <div class="flex flex-row justify-between">
          <div>电话: {{ userStore.userinfo.phone }}</div>
          <div>邮箱: {{ userStore.userinfo.email }}</div>
        </div>
      </div>
    </div>

  </div>

</template>

<script lang="ts" setup>
import { useUserStore } from '../../stores/user'
const userStore = useUserStore()
import { usePageStore } from '../../stores/page'
const pageStore = usePageStore()
</script>


<style scoped>
.userInfo-container {
  margin-top: 10px;
  width: 69%;
  background-color: white;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.024),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.el-link {
  margin-left: 8px;
  font-size: 1rem;
  font-weight: 700;
}

.hello-box {
  padding: 10px;
  margin-top: 10px;
  background-color: white;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.024),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}
</style>